<template>
    <h3>商品数据</h3>
    <h4>商品总数：{{ total }}</h4>
    <el-table :data="goodsList" style="width: 100%">
        <el-table-column prop="proid" label="商品编号" width="250" />
        <el-table-column prop="proname" label="商品名称" width="250" />
        <el-table-column prop="brand" label="品牌" width="100" />
        <el-table-column label="图片" width="200">
            <template #default="scope">
                <img class="img" :src="scope.row.img1">
            </template>
        </el-table-column>
        <el-table-column prop="originprice" label="商品价格" width="80" />
        <el-table-column prop="discount" label="商品折扣" width="80" />
        <el-table-column label="是否上架" width="80">
            <template #default="scope">
                <span>{{ scope.row.issale === 1 ? "已上架" : "未上架" }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否秒杀" width="80">
            <template #default="scope">
                <span>{{ scope.row.isseckill === 1 ? "已秒杀" : "未秒杀" }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否推荐" width="80">
            <template #default="scope">
                <span>{{ scope.row.isrecommend === 1 ? "已推荐" : "未推荐" }}</span>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <div class="demonstration">页面选择：</div>
        <el-pagination v-model:current-page="count" v-model:page-size="limitNum" :small="small"
            layout="prev, pager, next, jumper" :total="total" />
    </div>
</template>

<script setup lang="ts">
import type { AxiosResponse } from 'axios';
import { reactive, watch, ref } from 'vue'
import service from '../../../utils/service';
const small = ref(false)
// 设置商品总数量
const total = ref<number>()
// 获取商品总数量
service({
    url: `/statistic/product`,
}).then((res: AxiosResponse) => {
    if (res.data.code === "200") {
        total.value = res.data.data
    }
})

// 表单绑定搜索关键词
type TGood = {
    banner: string[],
    proid: string,
    brand: string,
    proname: string,
    originprice: number,
    sales: number,
    stock: number,
    desc: string,
    issale: number,
    isrecommend: number,
    discount: number,
    isseckill: number,
    img1: string


}
const goodsList = reactive<TGood[]>([])
// 每页展示数量
const limitNum = ref<number>(10)
// 页码
const count = ref<number>()
// 获取商品列表
const searchGoodsData = () => {
    service({
        url: `/pro/list`,
        params: {
            count: count.value,
            limitNum: limitNum.value
        }
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {

            goodsList.length = 0
            goodsList.push(...res.data.data)
        }
    })

}
searchGoodsData()
watch(count, () => {
    service({
        url: `/pro/list`,
        params: {
            count: count.value,
            limitNum: limitNum.value
        }

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            goodsList.length = 0
            goodsList.push(...res.data.data)
        }
    })
}, {
    deep: true
})


</script>

<style scoped>
h3 {
    text-align: center;
    margin-bottom: 10px;
}

h4 {
    color: red;
    margin-bottom: 10px;
}

.img {
    width: 200px;
    height: 185px;
}

.demo-pagination-block {
    margin: 10px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;

}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}
</style>